<template>
  <div class="chart_wrap">
      <div class="chart_form">
        <el-form label-width="100px">
            <el-form-item label="图表名">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="复制已有图表">
                <el-select>
                  <el-option>折线图</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图表基础配置">
              <el-select v-model="chartTypeItem" value-key="chartType">
                  <el-option v-for="item in chartList" :key="item.chartType"
                  :value="item" :label="item.chartType"  >{{item.chartType}}</el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="主角模式">
                  <el-radio-group>
                    <el-radio></el-radio>
                    <el-radio></el-radio>
                  </el-radio-group>
            </el-form-item>
      </el-form>
      </div>
      <div class="code_mirror" v-if="chartTypeItem.code">
          <codeMirror  :item-codes="chartTypeItem.code"></codeMirror>
      </div>
      <div class="chart_show" v-if="chartTypeItem.code">
         <chart-show></chart-show>
      </div>
  </div>
</template>
<script>
import chartMixins from './child/chartData'
import codeMirror from './child/codemirror.vue'
import chartShow from './child/chartShow.vue'
export default {
  name: 'Index',
  mixins:[chartMixins],

  components:{codeMirror,chartShow},
  data() {
    return {
      chartTypeItem:"",//收集当前选择的图表项
    };
  },

  mounted() {
    
  },

  methods: {

  },
};
</script>
<style lang="scss">
    .chart_wrap{
      display: flex;
      justify-content: space-between;
    }
    .chart_form{
      width: 400px;
      margin-left: 20px;
      margin-top: 50px;
    }
    .code_mirror{
      width: 600px;
      height: 500px;
      background: darkgrey;
      margin-top: 50px;
    }
    .chart_show{
      width: 600px;
      height: 500px;
      background: darkkhaki;
         margin-top: 50px;
    }
</style>